<template>
	<view class="page-content">
		<u-sticky customNavHeight="0">
			<u-tabs
				:list="tabs" 
				:activeStyle="{color:'#3f2a17',fontSize:'28rpx'}"
				:inactiveStyle="{fontSize:'26rpx'}"
				:current="onCurrent"
				:scrollable="false"
				:lineColor="configInfo.mainColor"
				@change="tabChange">
			</u-tabs>
		</u-sticky>
		<m-loading :show="listLoad" :emptyShow="list.data.length <= 0"></m-loading>
		<view class="list" v-if="!listLoad">
			<view class="item m-md section-bg  radius-5" v-for="(item,index) in list.data" :key="index" @click="go(item.id,item)">
				<view class="flex-between p-md p-t-sm p-b-sm" style="align-items: center;">
					<view class="e-num ">
						
						<text class="text-xs">{{item.order_num}}</text>
						<!-- <m-icon name="shopping-cart-line" size="30rpx" color="#666" :text="item.order_num" textSize="24rpx"></m-icon> -->
						<!-- <i-icon size="16px" color="#666" name="exchange-box-fill" @click="Copy(Item.num)"></i-icon> -->
					</view>
					<view class="order-state text-sm" :class="'order-state-'+item.state">{{ item.state_text }}</view>
				</view>
				<u-line color="#f5f6f7"></u-line>
				<view class="p-l-md p-r-md p-b-md flex-between flex-warp-nowarp">
					<view class="flex-start flex-warp-nowarp flex-1" style="align-items: flex-start;">
						<u--image :showLoading="true" :src="item.goods.complete_thumbs" width="60px" height="60px" mode="aspectFit"></u--image>
						<view  class="flex-start m-l-sm u-line-2 p-t-sm">
							<text class="badge " :class="{'badge-true' : item.goods_type == 2}">{{ item.goods_type_text }}</text>
							<text class="title text-sm m-l-xs flex-1">{{ item.goods_title }}</text>
						</view>
						
					</view>
					<view class="m-l-sm" style="text-align: right;">
						<view>
							<text class="price number text-md" style="color: var(--main-color-2);">{{ item.goods_integral }}</text>
							<text class="text-xs text-secondary">{{ configInfo.integral_company }}</text>
						</view>
						<view class="e-tags">
							<view class="tag text-xs text-secondary">
								<u-parse :content="$util.handleStr($t('m_goods_list_ass.all-count'),1)"></u-parse>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-load-more :status="status" :content-text="contentText" v-if="showLoading"></uni-load-more>
		
		<!-- 侧边小工具 -->
		<side-tools :scrollTop="scrollTop"></side-tools>
		
		<!-- 占位视图 -->
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				listLoad:true,
				onCurrent:0,
				pageObject:"",
				showLoading:false,
				status:"loading",
				contentText: {
					contentdown: this.$t('app.load.contentdown'),
					contentrefresh:  this.$t('app.load.contentrefresh'),
					contentnomore: this.$t('app.load.contentnomore'),
				},
				scrollTop:0
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
			tabs: state => state.mall.orderListabs,
			param: state => state.mall.orderParam,
			list: state => state.mall.orderList,
		}),

		/** 页面加载 **/
		async onLoad(){
		},
		onReady(){
			if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		/** 页面显示 **/
		onShow(){
			this.getList(this.onCurrent);
		},
				
		/** 下滑加载 **/
		async onReachBottom(){
			if (this.list.current_page >= this.list.last_page || this.ListLoad){
				this.status="nomore";
				return
			};
			this.status = "loading";
			this.showLoading = true;
			this.getList(this.param.page + 1);		
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			...mapActions(['getMallMyOrderList']),
			...mapMutations(['updateMallState']),
			
			async getList(page = 0){
				if (page) {
					let param = uni.$u.deepClone(this.param)
					param.page = page
					this.updateMallState({
						key: 'orderParam',
						val: param
					})
				}
				await this.getMallMyOrderList(this.param)
				this.listLoad = false;
			},
			go(Id,Item){
				uni.navigateTo({
					url: '/mall/pages/order?action=check&id='+Id,
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('detailInfo', {
								detailInfo:Item,
						})
					}
				});
			},
			tabChange(index){
				let param = uni.$u.deepClone(this.param)
				param.state = index.state
				this.onCurrent=index.state;
				this.updateMallState({
					key: 'orderParam',
					val: param
				})
				this.listLoad = true
				uni.pageScrollTo({
					scrollTop: 0
				})
				this.getList(1)
				
				// this.getList(index.state);
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: var(--theme-page-bg);
	}
	.u-tabs{
		background-color: #fff;
	}
		.order-state-1{
			color: #ff9900;
		}
		.order-state-2{
			color: #f29100;
		}
		.order-state-3{
			color: #19be6b;
		}
		.order-state-4{
			color: #18b566;
		}
		.order-state-5{
			color: #909399;
		}
	.badge-true{
		color: #fff;
		background-color: #333;
	}
</style>
